<template>
  <div class="box">
    <div class="btn">
      <el-button type="danger" @click="dailogShow">新增模板</el-button>
    </div>
    <el-table :data="Data" style="width: 100%" border>
      <el-table-column
        prop="templateType"
        label="模板类型"
        :formatter="templateMatter"
      >
      </el-table-column>
      <el-table-column
        prop="transportType"
        label="运送类型"
        :formatter="transportMatter"
      >
      </el-table-column>
      <el-table-column
        prop="associatedCityList"
        label="关联城市"
        :formatter="cityMatter"
      >
      </el-table-column>
      <el-table-column prop="firstWeight" label="首重"> </el-table-column>
      <el-table-column prop="continuousWeight" label="续重"> </el-table-column>
      <el-table-column prop="lightThrowingCoefficient" label="轻抛系数">
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="{ row }">
          <el-link type="primary" @click="edit(row)">编辑 | </el-link>
          <el-link type="danger" @click="del(row.id)"> 删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增模板"
      @close="close"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="模板类型" prop="associatedCityList">
          <el-select v-model="form.templateType" placeholder="请选择">
            <el-option
              v-for="item in template"
              :key="item.value"
              :label="item.city"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="continuousWeight">
          <el-select v-model="form.transportType" placeholder="请选择">
            <el-option
              v-for="item in transport"
              :key="item.value"
              :label="item.city"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市" prop="firstWeight">
          <span v-if="form.associatedCityList[0] === '1'">全国</span>
          <el-row v-else>
            <el-radio v-model="form.associatedCityList[0]" label="2">
              京津冀
            </el-radio>
            <el-radio v-model="form.associatedCityList[0]" label="3">
              江浙沪
            </el-radio>
            <el-radio v-model="form.associatedCityList[0]" label="4">
              川渝
            </el-radio>
            <el-radio v-model="form.associatedCityList[0]" label="5">
              黑吉辽
            </el-radio>
          </el-row>
        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input style="width: 600px" v-model="form.firstWeight"></el-input>
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input
            style="width: 600px"
            v-model="form.continuousWeight"
          ></el-input>
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input
            style="width: 600px"
            v-model="form.lightThrowingCoefficient"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-button type="success" @click="add()">添加</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
const associatedCity = {
  1: "全国",
  2: "京津冀",
  3: "江浙沪",
  4: "川渝",
  5: "黑吉辽",
};
const template = {
  1: "同城寄",
  2: "省内寄",
  3: "经济区互寄",
  4: "跨省",
};
const transport = {
  1: "普快",
  2: "特快",
};
//postCarriagesApi
import {
  getCarriagesApi,
  postCarriagesApi,
  delCarriagesApi,
} from "@/api/carriages";
export default {
  name: "freight-manage",
  data() {
    return {
      Data: [{}],
      associatedCity: [
        {
          id: "1",
          city: "全国",
        },
        {
          id: "2",
          city: "京津冀",
        },
        {
          id: "3",
          city: "江浙沪",
        },
        {
          id: "4",
          city: "川渝",
        },
        {
          id: "5",
          city: "黑吉辽",
        },
      ],
      template: [
        {
          id: 1,
          city: "同城寄",
        },
        {
          id: 2,
          city: "省内寄",
        },
        {
          id: 3,
          city: "经济区互寄",
        },
        {
          id: 4,
          city: "跨省",
        },
      ],
      transport: [
        {
          id: 1,
          city: "普快",
        },
        {
          id: 2,
          city: "特快",
        },
      ],
      dialogVisible: false,
      form: {
        associatedCityList: ["1"],
        continuousWeight: "",
        firstWeight: "",
        lightThrowingCoefficient: "",
        templateType: "",
        transportType: "",
      },
      rules: {
        associatedCityList: [
          { required: true, message: "请输入模板类型", trigger: "blur" },
        ],
        continuousWeight: [
          { required: true, message: "请输入运送类型", trigger: "blur" },
        ],
        firstWeight: [
          { required: true, message: "请输入首重价格", trigger: "blur" },
        ],
        lightThrowingCoefficient: [
          { required: true, message: "请输入轻抛系数", trigger: "blur" },
        ],
        templateType: [
          { required: true, message: "请输入续重价格", trigger: "blur" },
        ],
        transportType: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCarriages();
  },
  methods: {
    //获取运费
    async getCarriages() {
      const res = await getCarriagesApi();
      this.$message.success("获取成功");
      this.Data = res.data;
    },
    //关联城市formatter
    cityMatter(row, column, cellValue) {
      return associatedCity[cellValue];
    },
    templateMatter(row, column, cellValue) {
      return template[cellValue];
    },
    transportMatter(row, column, cellValue) {
      return transport[cellValue];
    },
    dailogShow() {
      this.dialogVisible = true;
    },
    async add() {
      const res = await postCarriagesApi(this.form);
     console.log(res);
      this.$message.success("添加成功");
      this.getCarriages();
      this.close();
    },
    edit(row) {
      this.form = row;
      this.dailogShow();
    },
    async del(id) {
      await this.$confirm("确认删除吗");
      await delCarriagesApi(id);
      this.$message.success("删除成功");
      this.getCarriages();
    },
    close() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 28px;
  background-color: #fff;
  min-height: 300px;
}
</style>